W-20975340, W-21013345: SPM at checkout by rasbhat · Pull Request #3603 · SalesforceCommerceCloud/pwa-kit

rasbhat · 2026-01-23T16:39:21Z

Display Saved Payment Methods at checkout
Includes refactoring for the work item W-21013345 as well.

Description

A registered User is able to view SPMs at checkout.
A registered user is able to use SPMs to checkout and place order.

Currently supported SPMs are Credit cards and SEPA debit

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

(change1)

How to Test-Drive This PR

(step1)

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

cc-prodsec · 2026-01-23T16:39:33Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

rasbhat · 2026-01-23T16:43:06Z

Ran linter on the files. Will be adding tests for all the changes.

packages/template-retail-react-app/app/hooks/use-current-customer.js

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx

sf-mkosak · 2026-01-28T16:52:20Z

packages/template-retail-react-app/app/hooks/use-current-customer.js

+ * @param {Array<string>} [expand] - Optional array of fields to expand in the customer query
 */
-export const useCurrentCustomer = () => {
+export const useCurrentCustomer = (expand = undefined) => {


= undefined is redundant

sf-mkosak · 2026-01-28T16:53:53Z

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.test.js

+
+// Get the mocked useCustomer from commerce-sdk-react
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const mockUseCustomer = require('@salesforce/commerce-sdk-react').useCustomer


Is using require like this an established pattern in PWA?

There are a few test modules (shipping-address.test.js, use-add-to-cart-modal.test.js) in PWA that use it.

Feels suspect having to disable lint rule here. It'd be good to at least try to find another solution here in case this doesn't jive well with the PWA reviewers when we merge to develop. Otherwise PR is looking good and shaping up!

sf-mkosak

Overall LGTM. I would challenge you to try to remove the lint disabling in the test.

rasbhat · 2026-01-28T17:20:11Z

Overall LGTM. I would challenge you to try to remove the lint disabling in the test.

The lint disable is in place throughout the codebase wherever the require has been used. If not disabled, it throws a lint error:

/Users/rvishwanathbhat/dev/git-repos/pwa-kit/packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.test.js
  1016:51  error  Require statement not part of import statement  @typescript-eslint/no-var-requires
  1157:17  error  Require statement not part of import statement  @typescript-eslint/no-var-requires

sf-mkosak · 2026-01-28T17:25:24Z

Overall LGTM. I would challenge you to try to remove the lint disabling in the test.

The lint disable is in place throughout the codebase wherever the require has been used. If not disabled, it throws a lint error:
/Users/rvishwanathbhat/dev/git-repos/pwa-kit/packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.test.js
  1016:51  error  Require statement not part of import statement  @typescript-eslint/no-var-requires
  1157:17  error  Require statement not part of import statement  @typescript-eslint/no-var-requires

What I mean is change the implementation such that you don't use require and therefore don't need to override lint rules.

rasbhat · 2026-01-28T17:27:47Z

Overall LGTM. I would challenge you to try to remove the lint disabling in the test.

The lint disable is in place throughout the codebase wherever the require has been used. If not disabled, it throws a lint error:
/Users/rvishwanathbhat/dev/git-repos/pwa-kit/packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.test.js
  1016:51  error  Require statement not part of import statement  @typescript-eslint/no-var-requires
  1157:17  error  Require statement not part of import statement  @typescript-eslint/no-var-requires
What I mean is change the implementation such that you don't use require and therefore don't need to override lint rules.

Ah, got it, let me try that. Will update my upcoming PR with it.

…/display-spms-at-checkout W-20975340, W-21013345: SPM at checkout

W-20975340: Display SPM at checkout

924e7ba

rasbhat requested review from amittapalli and jeffraab-sfdc January 23, 2026 16:39

rasbhat requested a review from a team as a code owner January 23, 2026 16:39

rasbhat requested a review from sf-mkosak January 23, 2026 16:40

W-20975340: Adding test cases

ca3dceb

sf-mkosak requested changes Jan 27, 2026

View reviewed changes

packages/template-retail-react-app/app/hooks/use-current-customer.js Outdated Show resolved Hide resolved

sf-mkosak reviewed Jan 27, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx Outdated Show resolved Hide resolved

sf-mkosak reviewed Jan 27, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx Outdated Show resolved Hide resolved

sf-mkosak reviewed Jan 27, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx Outdated Show resolved Hide resolved

sf-mkosak reviewed Jan 27, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx Show resolved Hide resolved

rasbhat added 2 commits January 28, 2026 06:21

Addressing comments

9d905de

Addressing comments

15d8ca8

sf-mkosak reviewed Jan 28, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx Outdated Show resolved Hide resolved

sf-mkosak reviewed Jan 28, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx Outdated Show resolved Hide resolved

W-20975340: Addressing comments

9fa4e45

sf-mkosak reviewed Jan 28, 2026

View reviewed changes

W-20975340: Addressing comments

29e2e82

sf-mkosak self-requested a review January 28, 2026 17:14

sf-mkosak approved these changes Jan 28, 2026

View reviewed changes

rasbhat changed the title ~~W-20975340: SPM at checkout~~ W-20975340, W-21013345: SPM at checkout Jan 28, 2026

rasbhat merged commit c9c028e into t/team404/sfp-on-pwa Jan 28, 2026
8 of 16 checks passed

rasbhat deleted the rvishwanathbhat/display-spms-at-checkout branch January 28, 2026 17:24

rasbhat added a commit that referenced this pull request Mar 5, 2026

Merge pull request #3603 from SalesforceCommerceCloud/rvishwanathbhat…

52b366f

…/display-spms-at-checkout W-20975340, W-21013345: SPM at checkout

rasbhat added a commit that referenced this pull request Mar 5, 2026

Merge pull request #3603 from SalesforceCommerceCloud/rvishwanathbhat…

f21da03

…/display-spms-at-checkout W-20975340, W-21013345: SPM at checkout

rasbhat added a commit that referenced this pull request Mar 5, 2026

Merge pull request #3603 from SalesforceCommerceCloud/rvishwanathbhat…

4bd6444

…/display-spms-at-checkout W-20975340, W-21013345: SPM at checkout

Conversation

rasbhat commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

rasbhat commented Jan 23, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sf-mkosak Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

rasbhat Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

sf-mkosak Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

rasbhat Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

sf-mkosak Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

sf-mkosak left a comment

Choose a reason for hiding this comment

Uh oh!

rasbhat commented Jan 28, 2026

Uh oh!

Uh oh!

sf-mkosak commented Jan 28, 2026

Uh oh!

rasbhat commented Jan 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rasbhat commented Jan 23, 2026 •

edited

Loading

cc-prodsec commented Jan 23, 2026 •

edited

Loading